<template>
    <div>
        <v-btn color="primary" outlined @click="newCategoryDialog = true" height="40px">
            新建分类
        </v-btn>
        <v-dialog
                v-model="newCategoryDialog"
                persistent
                overlay-opacity="0.2"
                max-width="400px"
        >
            <my-loading-overlay :loading-overlay="loadingOverlay"></my-loading-overlay>
            <v-card outlined>
                <v-card-title class="subtitle-1" style="border-bottom: 1px solid #d0dfe7">新建分类</v-card-title>
                <v-card-text class="mt-8">
                    <v-text-field
                            ref="categoryName"
                            outlined
                            label="分类名"
                            v-model="name"
                            class="mt-3"
                            dense
                            clearable
                            @keypress.enter="newCategory()"
                            :rules="[categoryNameRule]"
                    >
                    </v-text-field>
                </v-card-text>

                <v-card-actions>
                    <v-btn class="ml-10" width="130" color="primary" @click="newCategory()">新建</v-btn>
                    <v-btn class="ml-10" width="130" color="warning" @click="close()">取消</v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
    </div>
</template>

<script>
    import {categoryNameRule} from "../../../../util/rule";
    import MyLoadingOverlay from "../../common/MyLoadingOverlay";
    export default {
        name: "MyNewCategoryBtn",
        components: {
            MyLoadingOverlay
        },
        data() {
            return {
                newCategoryDialog: false,
                loadingOverlay: false,
                name: '',
                categoryNameRule
            }
        },
        methods: {
            newCategory() {
                let _this = this;
                if (!_this.$refs["categoryName"].validate()) {
                    return;
                }
                _this.loadingOverlay = true;
                _this._post({
                    url: 'system/collection/new-category',
                    data: {
                        name: _this.name
                    }
                }).then(rsp => {
                    if (rsp.data.code === "00000") {
                        _this.$emit("new-category-success");
                        _this.close();
                    } else {
                        _this.$error({message: rsp.data.msg})
                    }
                }).catch(error => {
                    console.log(error);
                    _this.$serverError();
                }).finally(() => {
                    _this.loadingOverlay = false;
                })
            },
            close() {
                this.newCategoryDialog = false;
                this.$refs["categoryName"].reset();
            }
        }
    }
</script>

<style scoped>

</style>